<template>
	<view class="status-card flex-center-between">
		<view class="flex-center u-p-l-40">
			<image
			:src="currentStatus.icon"
			style="width: 88rpx; height: 90rpx;"
			class="clear-flex"></image>
			
			<view class="u-m-l-32">
				<view class="u-f-38 u-lh-52 font-bold">{{ lang_order[currentStatus.key + 'Tips'] }}</view>
				<view class="u-m-t-8 u-f-26 u-lh-36 flex-center">
					<x-counttime v-show="currentStatus.key === 'pendingPayment'" ref="counttime" :time="info.waitPayTime" format="H+:m+:s+" @change="timeChange"></x-counttime>
					<view>{{ lang_order[currentStatus.key + 'SubTips'] }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				default: () => ({})
			},
			isRefund: {
				default: false
			}
		},
		data() {
			// 初始化状态信息
			// 0待支付，1已支付或待拼团，2待发货或待核销，3待收货或已核销，4已评价5已完成，-1退单，-2支付费用失败,-3,订单已关闭'
			// 0待支付，1已支付或待拼团，2待发货或待核销，3待收货或已核销，4已评价5已完成，-1退单，-2支付费用失败,-3,订单已关闭,10是待审核，11审核成功待发货，12发货成功待退款，13已退款
			// 下单支付不需要快递费 5、6、7
			// 退款状态，0是待审核，1审核成功待发货，2发货成功待退款，3已退款-1审核被拒，-2是已关闭售后-3退款失败
			return {
				orderStatusList: [],
				refundStatusList: []
			}
		},
		computed: {
			// 获取当前的按钮
			currentStatus() {
				let { orderStatus, refundStatus } = this.info
				let list = (this.isRefund ? this.refundStatusList : this.orderStatusList)
				let status = this.isRefund ? refundStatus : orderStatus
				return list.find(item => item.value === status) || {}
			}
		},
		created() {
			let orderStatusList = [
				{ value: 0, key: 'pendingPayment', label: '订单待付款', tips: '后将自动取消订单' },
				{ value: 1, key: 'delivery', label: '订单已付款', tips: '订单待发货，稍安勿躁' },
				{ value: 2, key: 'delivery', label: '订单待发货', tips: '订单待发货，稍安勿躁' },
				{ value: 3, key: 'receivedGoods', label: '订单待收货', tips: '宝贝马上就到了，再耐心等待一下' },
				{ value: 4, key: 'orderUnEvaluate', icon: 'complete', label: '订单待评价', tips: '' },
				{ value: 5, key: 'complete', label: '订单已完成', tips: '订单已完成，有后续可以联系客服人员' },
				{ value: -1, key: 'chargeback', icon: 'reject',  label: '退单', tips: '' },
				{ value: -2, key: 'payFailure', icon: 'reject', label: '支付失败', tips: '' },
				{ value: -3, key: 'orderClose', icon: 'reject', label: '订单已关闭', tips: '' },

			].map(item => {
				let result = {
					...item,
					icon: require(`@/static/image/order/status_icon_${ item.icon || item.key }.png`)
				}
				return result
			})
			let refundStatusList = [
				{ value: 0, key: 'examine', icon: 'pendingPayment', label: '平台审核中请耐心等待', tips: '还剩余23：12：14' },
				{ value: 1, key: 'resolve', label: '商家已同意退款/退货', tips: '请尽快寄回商品，并填写单号' },
				{ value: -1, key: 'reject', label: '商家不同意退款/退货', tips: '' },
				{ value: -2, key: 'saledClose', icon: 'reject', label: '售后已关闭', tips: '' },
				{ value: 2, key: 'waitRefund', icon: 'complete', label: '售后成功待退款', tips: '' },
				{ value: 3, key: 'refund', label: '订单已退款', tips: '订单已退款，请查看余额' },
			].map(item => {
				let result = {
					...item,
					icon: require(`@/static/image/order/status_icon_${ item.icon || item.key }.png`)
				}
				return result
			})
			this.orderStatusList = orderStatusList
			this.refundStatusList = refundStatusList
		},
		methods: {
			// 倒计时改变后
			timeChange(e) {
				let { orderStatus, refundStatus } = this.info
				let showTime = (e > 0 && (!orderStatus) && typeof refundStatus !== 'number')
				if (!showTime) {
					let node = this.$refs.counttime
					node && node.destoryAction()
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.status-card {
		position: relative;
		transform: translateY(-1rpx);
		height: 190rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #F94404 0%, #FD164F 100%);
	}
</style>
